import styles from './msgboard.less';
import React  from 'react';
import { Form, Input, Button} from 'antd';
import { FC, useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'umi'
import { liuyan } from '@/serives/msgboard/msgboard';
// import {liuyan} from '@/serives/msgboard'


const onFinish = (values: any) => {
    console.log('Success:', values);
};
  
const msgboard:React.FC=()=>{
   const store = useSelector((state) => state.msgboard);
   let dispatch=useDispatch()
   //console.log(store.list);
   
   useEffect(() => {
       dispatch({
           type:"msgboard/getlist"
       })
   }, [])

   useEffect(() => {
        dispatch({
            type:"msgboard/liuyan"
        })
    }, [])
    liuyan().then(res=>{
        console.log(res);
        
    })
    //随机背景色
    function randomColor() {
        var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']; // 下标 [0-15]
        var str = '#';
        //生成0-15随机下标
        for (var i = 1; i <= 6; i++) { 
            var index = Math.floor(Math.random() * 16);
            str += arr[index];
        };
        
        return str;
    };

    //回复的flag
    const [isFlag, setIsFlag] = useState(false)
    //修改flag
    
   
    const { TextArea } = Input;
    return (
        <div className={styles.msgboard}>
            <div className={styles.top}>
                <div className={styles.ttop}>留言板</div>
                <div className={styles.tbot}>【请勿灌水】</div>
            </div>
            <div className={styles.ping}>
                评论
            </div>
            <div className={styles.center}>
                <Form className={styles.form} onFinish={onFinish}>
                        <Form.Item
                            name="html"
                            rules={[{ required: true, message: 'Please input your content!' }]}
                        >
                         <TextArea rows={4} placeholder='请输入内容(支持MarkDown)' />
                        </Form.Item>
                        <Form.Item >
                            <span className={styles.fItem}>表情</span>
                            <Button htmlType="submit" style={{}}>
                                发布
                             </Button>
                        </Form.Item>
                    </Form>
            </div>
            <div className={styles.liuyan}>
                {
                    store.liuyanlist.map((item:any)=>{
                        return <div className={styles.liubox}> 
                                    <div className={styles.liutop}>
                                        <span style={{ background: randomColor() }}> {item.name}</span>
                                        <span className={styles.names}>{item.name}</span>
                                    </div>
                                    <div className={styles.liucen}>
                                        {item.content}
                                    </div>
                                    <div>
                                        {item.userAgent}
                                        <span>回复</span>
                                    </div>
                                </div>
                    })
                }
            </div>
            <div className={styles.ping}>
                推荐阅读
            </div>
            <div className={styles.bottom}>
                {
                    console.log(store.list)
                    
                }
                {
                   store.list&&
                    store.list.map((item:any)=>{
                        return <div className={styles.bbox}> 
                                    <div className={styles.tops}>
                                        <span><b>{item.title}</b></span>
                                        {/* <span>{item.updateAt}</span> */}
                                    </div>
                                    <div className={styles.bottoms}>
                                        <div className={styles.btop}>
                                            <img className={styles.btopimg} src={item.cover} alt="" />
                                        </div>
                                        <div className={styles.bbot}>
                                            {item.summary}
                                        </div>
                                    </div>
                                </div>
                    })
                }
            </div>
        </div>
    )
}
export default msgboard